<div class="sw-extension-my-extensions-listing">
    <sw-skeleton
        v-if="isLoading"
        :variant="skeletonVariant"
    />

    <div
        v-else
        class="sw-extension-my-extensions-listing__listing-grid"
    >
        <mt-banner
            v-if="!isAppUrlReachable"
            class="sw-extension-my-extensions-listing__app-url-warning"
            variant="attention"
            :title="$tc('sw-app.component.sw-app-wrong-app-url-modal.title')"
        >
            <div>
                {{ $tc('sw-app.component.sw-app-wrong-app-url-modal.explanation') }}
            </div>

            <div>
                {{ $tc('sw-app.component.sw-app-wrong-app-url-modal.textGetSupport') }}
            </div>

            <mt-button
                class="sw-app-wrong-app-url-modal__content-link-button"
                variant="secondary"
                :link="$tc('sw-app.component.sw-app-wrong-app-url-modal.linkToDocsArticle')"
            >
                {{ $tc('sw-app.component.sw-app-wrong-app-url-modal.labelLearnMoreButton') }}
            </mt-button>
        </mt-banner>

        <mt-banner
            v-if="extensionManagementDisabled"
            class="sw-extension-my-extensions-listing__runtime-extension-warning"
            variant="attention"
            :title="$tc('sw-extension-store.component.sw-extension-my-extensions-listing.alertExtensionManagement.title')"
        >
            <div>
                {{ $tc('sw-extension-store.component.sw-extension-my-extensions-listing.alertExtensionManagement.description') }}
            </div>

            <mt-link
                type="external"
                href="https://developer.shopware.com/docs/guides/hosting/installation-updates/extension-managment.html"
            >
                {{ $tc('sw-app.component.sw-app-wrong-app-url-modal.labelLearnMoreButton') }}
            </mt-link>
        </mt-banner>

        {% block sw_extension_my_extensions_list_empty_state %}

        <sw-meteor-card
            v-if="!extensionListPaginated.length && !filterByActiveState"
            class="sw-extension-my-extensions-listing__empty-state"
        >
            <img
                :src="assetFilter('administration/administration/static/img/empty-states/extensions-empty-state.svg')"
                alt=""
            >

            <h3 v-if="isThemeRoute">
                {{ $tc('sw-extension-store.component.sw-extension-my-extensions-listing.themes.titleEmptyState') }}
            </h3>
            <h3 v-else>
                {{ $tc('sw-extension-store.component.sw-extension-my-extensions-listing.apps.titleEmptyState') }}
            </h3>

            <p v-if="isThemeRoute">
                {{ $tc('sw-extension-store.component.sw-extension-my-extensions-listing.themes.textEmptyState') }}
            </p>
            <p v-else>
                {{ $tc('sw-extension-store.component.sw-extension-my-extensions-listing.apps.textEmptyState') }}
            </p>

            <mt-button
                ghost
                variant="secondary"
                @click="isThemeRoute ? openThemesStore() : openStore()"
            >
                {{ $tc('sw-extension-store.component.sw-extension-my-extensions-listing.btnOpenStore') }}
            </mt-button>
        </sw-meteor-card>

        {% endblock %}

        <template v-else>
            <div class="sw-extension-my-extensions-listing__container">
                <sw-extension-my-extensions-listing-controls
                    @update:active-state="changeActiveState"
                    @update:sorting-option="changeSortingOption"
                />

                <sw-extension-component-section
                    v-if="isThemeRoute"
                    position-identifier="sw-extension-my-extensions-listing__before-content"
                />

                <sw-meteor-card
                    v-if="!extensionListPaginated.length && filterByActiveState"
                    class="sw-extension-my-extensions-listing__empty-state"
                >
                    <img
                        :src="assetFilter('administration/administration/static/img/empty-states/extensions-empty-state.svg')"
                        alt=""
                    >

                    <h3 v-if="isThemeRoute">
                        {{ $tc('sw-extension-store.component.sw-extension-my-extensions-listing.themes.noActivePlugins') }}
                    </h3>
                    <h3 v-else>
                        {{ $tc('sw-extension-store.component.sw-extension-my-extensions-listing.apps.noActivePlugins') }}
                    </h3>
                </sw-meteor-card>

                <template v-else>
                    <template
                        v-for="entry in extensionListPaginated"
                        :key="entry.name"
                    >
                        <component
                            :is="entry.storeLicense ? 'sw-extension-card-bought' : 'sw-self-maintained-extension-card'"
                            :extension="entry"
                            @update-list="updateList"
                        />
                    </template>

                    <sw-pagination
                        :total="total"
                        :limit="limit"
                        :page="page"
                        @page-change="changePage"
                    />
                </template>
            </div>
        </template>
    </div>
</div>
